@charset "utf-8";
/* CSS Document */

html {
    height: 99%;
	
	/*background-size: contain;*/
	background-image: url(images/bkg.png);*/	
	background-repeat: repeat;
	overflow-x: hidden;
	overflow-y: auto;
	
	/*background-color: #131313;*/	
	/* mozilla example - FF3.6+ */
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(19,19,19,0.75) 25%,rgba(19,19,19,0.75) 75%,rgba(0,0,0,0) 100%), url(images/bkg.png); /* Chrome10+,Safari5.1+ */	
	background-image: -moz-linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(19, 19, 19, 0.75) 25%, rgba(19, 19, 19, 0.75) 75%, rgba(0, 0, 0, 0) 100%), url(images/bkg.png);
}

body {
	height: 100%;

	margin: 0px;
	/*padding: 10px;*/
	
	font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
	font-size: 14px;

	color: #FFF;	
}

a img {
	border: none; 
}

a:link {
	font-size: 16px;
	color: #06F;
	text-decoration: none;
}
a:hover {
	/*filter: Invert;*/
	/*color: #09F;*/
	color: #3CA3CA;
	/*cursor: default;*/
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}

#wrap {
	height: 100%;
	
	margin:  0px auto;
	/*margin:  2% 10% 2% 10% !important;*/
}

#content {
	width: 100%;
	height: 100%;
	/*border:  1px solid red;*/
}

#logo {
	width: 10%;	
	
	position: relative;
	left: 45%;
	right: 45%;
	top: 10%;
}

#logo img {
	width: 100%;
	height: auto;	
}

#social-icons {
	width: 7%;
	height: auto;
	
	position: absolute;
	bottom: 11%;
	right: 5%;
}
#social-icons img {
	width: 50%;	
	height: auto;
	
	-ms-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;	
}
#social-icons:hover img {
	opacity: 0.2;
}
#social-icons img:hover {
	opacity: 1;
	
	/*transform:translate(0px,-10px);*/
	-ms-transform:translate(0px,-10px); /* IE 9 */
	-moz-transform:translate(0px,-10px); /* Firefox */
	-webkit-transform:translate(0px,-10px); /* Safari and Chrome */
	-o-transform:translate(0px,-10px); /* Opera */
}

#footer {
	width: 50%;
	height: auto;
	
	position: absolute;
	bottom: 3%;
	right: 25%;
	left:25%;
	text-align:center;
}

#social-icons img.twitter {

}

#social-icons img.facebook {
	
}

#main-section {
	width: 50%;
	min-width: 300px;
	height: 20%;
	
	position: absolute;
	left: 25%;
	right: 25%;
	top: 40%;
	bottom: 40%;
	
	text-align: center;
	z-index: 10;
}

#main-section img {
	position: relative;
	width: 19%;
	height: auto;
	
	vertical-align: middle;

	-moz-border-radius: 3px; 
	-webkit-border-radius: 3px; 
	border-radius: 3px; 

	-moz-box-shadow:    0px 0px 3px 1px #333333;
	-webkit-box-shadow: 0px 0px 3px 1px #333333;
	box-shadow:         0px 0px 3px 1px #333333;
	
	-ms-transition: box-shadow 0.3s ease;
	-moz-transition: box-shadow 0.3s ease;
	-webkit-transition: box-shadow 0.3s ease;
	-o-transition: box-shadow 0.3s ease;
}

#main-section img.claro {
	z-index: 11;
}

#main-section img.oscuro {
	z-index: 10;
}

#main-section img:hover {
	-moz-box-shadow:    0px 0px 5px 3px #FFF;
	-webkit-box-shadow: 0px 0px 5px 3px #FFF;
	box-shadow:         0px 0px 5px 3px #FFF;
}

#main-section img.oscuro:hover {
	z-index: 12;
}
#footer_text, #footer_text a  {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 9px;
	font-style: normal;
	line-height: normal;
	font-weight: lighter;
	font-variant: normal;
	color: #666;
}
#footer_text a:hover {
	color: #3CA3CA;
}

#upper_bar {
	position: fixed;
	top: 0%;
	background: #131313;
	width: 100%;
	height: 15%;
	z-index: -1;
}
#lower_bar {
	position: fixed;
	bottom: 0%;
	background: #131313;
	width: 100%;
	height: 15%;
	z-index: -1;
}

/* Media Queries para adaptar a resoluciones menores */

@media screen and (max-width: 800px) {

	#main-section {
		width: 70%;
		height: 20%;
	
		left: 15%;
		right: 15%;
	}
	
}

@media screen and (max-width: 600px) {
	
	#logo {
		width: 20%;
		left: 40%;
		right: 40%;
		top: 12%;
	}

	#main-section {
		width: 94%;	
		left: 3%;
		right: 3%;
	}
	
	#main-section img {
		width: 15%;	
	}
	
}
h2 {
	font-size: 18px;
	font-weight: bold;
	color: #507c9f;
	letter-spacing: 3px;
	word-spacing: 2px;
}
